<template>
	<view class="content" v-if="gasstation">
		<view class="wid90 mar">
			<view class="hei20"></view>
			<view class="wid100 dis disAl hei60">
				<image src="../../static/shangjia_icon.png" style="width: 30rpx;height: 28rpx;"></image>
				<view class="dis disAl mar-left20 fowe800" @click="tiaozhuan('/pages/merchant/merchant?id='+jiaId)">
					<view class="foSi30 ">{{gasstation.name}}</view>
					<view class="dis disAl mar-left30 foSi20" style="color: #4B4B4B;">
						<view>切换</view>
						<uni-icons class="dis" type="right" size="20rpx" color="#4B4B4B"></uni-icons>
					</view>
				</view>
			</view>
			<view class="dis disAl">
				<image src="../../static/weizhi_icon.png" class="mar-left10" style="width: 16rpx;height: 20rpx;"></image>
				<view class="foSi20 mar-left10" style="color: #587273;">{{gasstation.address}}</view>
			</view>
			<swiper v-if="gasstation.shop_banner" class="wid100 borRad20 mar-top20" style="height: 273rpx;" circular :autoplay='true'>
				<swiper-item v-for="(item,index) in gasstation.shop_banner.split(',')" :key="index">
					<image :src="url+item" class="wh100 borRad20"></image>
				</swiper-item>
			</swiper>
			<view class="wid100 mar-top30 borRad20 bacFFF foSi25" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);">
				<view style="height: 40rpx;"></view>
				<view class="wid95 mar dis" style="line-height: 0;">
					<view class="textCen" style="width: 20%;" @click="tiaozhuan('/pages/index/activity')">
						<image src="../../static/chongzhi.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="mar-top15" style="line-height: 35rpx;">会员充值</view>
					</view>
					<view class="textCen" style="width: 20%;" @click="tiaozhuan('/pages/wode/service')">
						<image src="../../static/kefu.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="mar-top15" style="line-height: 35rpx;">客服中心</view>
					</view>
					<view class="textCen" style="width: 20%;" @click="tiaozhuan('/pages/getACoupon/getACoupon')">
						<image src="../../static/lingjuan.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="mar-top15" style="line-height: 35rpx;">领券中心</view>
					</view>
					<view class="textCen" style="width: 20%;" @click="tiaozhuan1('/pages/store/store')">
						<image src="../../static/huiyuanshangcheng.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="mar-top15" style="line-height: 35rpx;">会员商城</view>
					</view>
					<view class="textCen" style="width: 20%;" @click="tiaozhuan(identity == '0'?'/pages/distribution/applicant':'/pages/distribution/distribution')">
						<image src="../../static/fenxiao.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="mar-top15" style="line-height: 35rpx;">分销中心</view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
			</view>
			
			<view class="mar-top20 bacFFF borRad20" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);">
				<view class="wid95 mar">
					<view class="hei20"></view>
					<view class="dis disAl disJuB">
						<view class="fowe800 foSi25">人气推荐</view>
						<view class="dis disAl" @click="tiaozhuan1('/pages/toiletries/toiletries')">
							<view class="mar-right10 foSi20" style="color: #585858;">更多</view>
							<uni-icons class="dis" type="right" size="25rpx" color="#585858"></uni-icons>
						</view>
					</view>
					<view class="dis disAl disJuB flwa">
						<block v-for="(item,index) in gasstation.goods" :key="index">
							<view class="borRad20 bacFFF mar-top20" @click="tiaozhuan('/pages/toiletries/commodity?id='+item.id)"
								style="width: 49%;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding-bottom: 20rpx;">
								<view class="wid100"style="height: 267rpx;">
									<image :src="url+item.pic.split(',')[0]" class="wh100"
										style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"></image>
								</view>
								<view class="wid90 mar mar-top10">
									<view class="foSi20 fowe800 yclh">{{item.name}}</view>
									<view class="dis disJuB foSi20 mar-top10" style="align-items: flex-end;">
										<view>
											<view class="fowe600 foSi25" style="color: #37BCC3;">¥{{item.price}}</view>
											<view class="mar-top10 foSi18" style="color: #585858;">已售{{item.sell_num}}</view>
										</view>
										<image src="../../static/gwowuche.png" style="width: 45rpx;height: 45rpx;"></image>
									</view>
								</view>
							</view>
						</block>
					</view>
					<view style="height: 50rpx;"></view>
				</view>
			</view>
			<image :src="url+gasstation.protect_img" class="wid100 mar-top20" mode="widthFix"></image>
			<view style="height: 50rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				gasstation: '',
				jiaId: '',
				date: '', //现在时间
				timer: null,
				identity:0
			}
		},
		onLoad(option) {
			var that = this
			that.getTx()
			// alert(option.parent_id)
			console.log(option.parent_id);
			if(option.parent_id){
				uni.setStorageSync('parent_id',option.parent_id)
			}else{
				uni.setStorageSync('parent_id',0)
			}
			that.identity = uni.getStorageSync('userinfo').identity;
		},
		onShow() {
			var jiaId = uni.getStorageSync('jiaId')
			if (jiaId) {
				this.jiaId = jiaId
				this.getList()
			} else {
				this.getLocation()
			}
		},
		methods: {
			getLocation() {
				let that = this
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						console.log(res)
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											console.log(res)
											uni.setStorageSync('location_y', res.longitude.toFixed(6))
											uni.setStorageSync('location_x', res.latitude.toFixed(6))
											that.getGasstationList()
										},
										fail(error) {
											console.log('失败', error)
										}
									})
								},
								fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)
									that.getGasstationList()
								}
							})
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									uni.setStorageSync('location_y', res.longitude.toFixed(6))
									uni.setStorageSync('location_x', res.latitude.toFixed(6))
									that.getGasstationList()
								},
								fail(error) {
									uni.showToast({
										title: '请勿频繁调用！',
										icon: 'none',
									})
									console.log('失败', error)
									that.getGasstationList()
								}
							})
						}
					}
				})
			},
			getGasstationList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
					},
					data: {
						location_y: uni.getStorageSync('location_y')?uni.getStorageSync('location_y'):'104.480609',
						location_x: uni.getStorageSync('location_x')?uni.getStorageSync('location_x'):'36.305564',
						page: that.page,
						limit: 10,
						city: uni.getStorageSync('city')?uni.getStorageSync('city'):'长春'
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							if(uni.getStorageSync('jiaId')){
								that.last_page = result.data.list.last_page
								that.list = that.list.concat(result.data.list.data)
							}else{
								uni.setStorageSync('jiaId', result.data.list.data[0].id)
								// uni.switchTab({
								// 	url: '/pages/index/index'
								// })
								that.getList()
								// setTimeout(() => {
								// 	this.$router.go(0)
								// }, 500)
							}
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			getTx() {
				var that = this
				uni.request({
					url: this.global.url + '/api/qianyu_petrol/gasstation_template_message',
					method: "POST",
					header: {
						'site-id': that.global.site_id,
					},
					data: {},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							var tzId = result.data[0]
							uni.setStorageSync('tzId', tzId)
						}
					}
				})
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "年" + month + "月" + day + "日 " + hours + ":" + minutes;
				// return year + "-" + month + "-" + day;
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_index',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
					},
					data: {
						id: that.jiaId
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.gasstation = result.data
						}
					}
				})
			},
			tiaozhuan(url) {
				var that = this
				var userinfo = uni.getStorageSync('userinfo')
				if(!userinfo && (url == '/pages/index/activity' || url == '/pages/distribution/applicant')){
					uni.switchTab({
						url: '/pages/wode/wode'
					})
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			tiaozhuan1(url) {
				uni.switchTab({
					url: url
				})
			},
			tishi(){
				uni.showToast({
					title: '正在开发！',
					icon: 'none',
				})
			}
		},
		//发送给朋友
		    onShareAppMessage(res) {
				var that = this;
				var url;
				if(uni.getStorageSync('userinfo')){
					url = '/pages/index/index?parent_id='+uni.getStorageSync('userinfo').id;
				}else{
					url = '/pages/index/index';
				}
				return {
					title: that.gasstation.name,
					path: url,
					imageUrl: that.url+that.gasstation.img //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
		    },
		    //分享到朋友圈
		    onShareTimeline(res) {
				var that = this;
				var url;
				if(uni.getStorageSync('userinfo')){
					url = 'parent_id='+uni.getStorageSync('userinfo').id;
				}else{
					url = '';
				}
				return {
					title: that.gasstation.name,
					query:url,//页面参数
					imageUrl: that.url+that.gasstation.img //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
		    },
	}
</script>

<style>
	.content {
		background: linear-gradient(#B4FBFF, #FFFFFF 35%);
		min-height: 100vh;
	}
	.richImg {
	    width: 100% !important;
	    height: auto !important;
	}
</style>